@import "../../sass/themes/base";

@import "../../sass/mixins/base";
@import "../../sass/mixins/compatible";

@import "../../sass/themes/button";
@import "../../sass/mixins/button";

$button-prefix: #{'.' + $css-prefix + 'button-'};

.#{$css-prefix}button{
  @include button($button-default, $button-default-text);
}

#{$button-prefix}primary{
  @include button($button-primary);
}

#{$button-prefix}success{
  @include button($button-success);
}

#{$button-prefix}danger{
  @include button($button-danger);
}

#{$button-prefix}warning{
  @include button($button-warning);
}

#{$button-prefix}info{
  @include button($button-info);
}

#{$button-prefix}disable{
  @include button($button-disable-background-color, $button-disable-color, $button-disable-border-color);
  cursor: not-allowed;
}

#{$button-prefix}default-hollow{
  @include button($button-hollow, $button-default-text, darken($button-default-text, 6%));
  &:hover{
    @extend .#{$css-prefix}button;
  }
}

#{$button-prefix}primary-hollow{
  @include button($button-hollow, $button-primary, darken($button-primary, 6%));
  &:hover{
    @extend #{$button-prefix}primary;
  }
}

#{$button-prefix}success-hollow{
  @include button($button-hollow, $button-success, darken($button-success, 6%));
  &:hover{
    @extend #{$button-prefix}success;
  }
}

#{$button-prefix}danger-hollow{
  @include button($button-hollow, $button-danger, darken($button-danger, 6%));
  &:hover{
    @extend #{$button-prefix}danger;
  }
}

#{$button-prefix}warning-hollow{
  @include button($button-hollow, $button-warning, darken($button-warning, 6%));
  &:hover{
    @extend #{$button-prefix}warning;
  }
}

#{$button-prefix}info-hollow{
  @include button($button-hollow, $button-info, darken($button-info, 6%));
  &:hover{
    @extend #{$button-prefix}info;
  }
}

#{$button-prefix}disable-hollow{
  @include button($button-hollow, $button-disable, darken($button-disable, 6%));
  cursor: not-allowed;
}

#{$button-prefix}ghost{
  @include button($button-ghost-background-color, $button-ghost-color, $button-ghost-border-color)
}

#{$button-prefix}large{
  @include button-size($button-large-height, $button-large-font-size, $button-large-padding-LR);
}

#{$button-prefix}small{
  @include button-size($button-small-height, $button-small-font-size, $button-small-padding-LR);
}

#{$button-prefix}group{
  @include clearfix();
  display: inline-block;

  [class*='#{$css-prefix}button']{
    float: left;
    border-radius: 0;
    border-right-width: 0;
    padding: 0 30px;
    transition: background-color .5s, border-color .5s;
    &:first-child{
      border-bottom-left-radius: $button-border-radius;
      border-top-left-radius: $button-border-radius;
    }
    &:last-child{
      border-bottom-right-radius: $button-border-radius;
      border-top-right-radius: $button-border-radius;
      border-right-width: 1px;
    }
  }

}

#{$button-prefix}block{
  display: block!important;
  text-align: center;
}

//.#{$css-prefix}upload{
//  position: relative;
//  overflow: hidden;
//  input[type="file"]{
//    position: absolute;
//    top: 0;
//    bottom: 0;
//    left: 0;
//    font-size: 300px;
//    opacity: 0;
//    cursor: pointer;
//  }
//}
//
//#{$button-prefix}switch{
//  cursor: pointer;
//  display: inline-block;
//  border: 1px solid $border-color-default;
//  border-radius: $border-radius / 2;
//  height: 24px;
//  width: 46px;
//  .#{$css-prefix}switch-point{
//    display: inline-block;
//    border-radius: $border-radius / 2 - 2;
//    height: 16px;
//    width: 16px;
//    margin: 3px;
//    position: relative;
//    @include transition(all .1s);
//  }
//  &.open{
//    .#{$css-prefix}switch-point{
//      background-color: $primary-color;
//      left: 0;
//    }
//  }
//  &.close{
//    .#{$css-prefix}switch-point{
//      background-color: #c9c9c9;
//      left: 22px;
//    }
//  }
//}
//
//#{$button-prefix}group-input{
//  @extend #{$button-prefix}group;
//  .#{$css-prefix}button{
//    padding: 0 15px;
//  }
//  .#{$css-prefix}input{
//    text-align: center;
//    border-bottom-left-radius: 0;
//    border-top-left-radius: 0;
//    width: 60px;
//    height: $button-default-height;
//    line-height: $button-default-height - 2;
//  }
//}